<script setup lang="ts">
import UploadForm from "./upload_data_form.vue";
import DeleteForm from "./delete_zone_data_form.vue";
import ReCol from "@/components/ReCol";
import { onBeforeMount } from "vue";
import { onMounted } from "vue";
import { reactive, ref, toRefs, watch } from "vue";
import { useRouter, useRoute } from "vue-router";

defineOptions({
  name: "PureUpload"
});

onMounted(() => {
  console.log("data_manage组件挂载了~");
});
</script>

<template>
  <el-row :gutter="12" justify="space-between">
    <el-col :xs="24" :sm="24" :md="12" :lg="12">
      <el-card shadow="never" style="height: 550px">
        <el-row :span="24" :gutter="20" justify="space-between">
          <re-col :value="24" :md="12" :xs="24">
            <el-text tag="b" class="mx-1" size="large" style="color: green"
              >▶上传PFMEA文件EXCEL到系统数据库</el-text
            >
          </re-col>
        </el-row>
        <el-divider />
        <div class="flex justify-between">
          <UploadForm />
        </div>
        <el-divider />
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12">
      <el-card shadow="never" style="height: 550px">
        <el-row :span="24" :gutter="20" justify="space-between">
          <re-col :value="24" :md="12" :xs="24">
            <el-text tag="b" class="mx-1" size="large" style="color: red"
              >▶删除对应区域数据__(适用于批量删除数据)</el-text
            >
          </re-col>
        </el-row>
        <el-divider />
        <div class="flex justify-between">
          <DeleteForm />
        </div>
        <el-divider />
      </el-card>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
:deep(.card-header) {
  display: flex;
  .header-right {
    display: flex;
    flex: auto;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
  }
}

:deep(.pure-upload) {
  .el-upload-dragger {
    background-color: transparent;
    border: none;
  }
}
</style>
